import React, { useEffect, useState } from 'react'
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import CheckCircleIcon from '@material-ui/icons/CheckCircle';
import './select.less'
import DoneIcon from '@material-ui/icons/Done';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import { sendAnswerApi } from '@/Api'
import { connect } from 'react-redux';
import { alertDispatch } from '@/utils/'

function Select(props) {
    const [options, setOptions] = useState([])
    useEffect(() => {
        if (props.data) {
            const temp = JSON.parse(props.data.optionContent)
            temp.sort((a, b) => a.sort - b.sort)
            // 要给数组里面添加一个状态，表示是否勾选
            temp.forEach(e => e.checked = false)
            setOptions(temp)
        }
    }, [props.data])
    const clickToChecked = (item) => {
        // 如果点击确定后，答案不能修改
        if(isAnwsered) return
        // 如果是单选 / 判断，只让一个选中
        if (props.data.questionType === 'one' || props.data.questionType === 'check') {
            // 排他
            options.forEach(e => e.checked = false)
        }
        item.checked = !item.checked
        // 强制把数据替换掉 -- class组件里面，只有setState可以更新数据
        //  -- 在hooks里面，也是，只有 setXXX 修改的函数才能触发视图的更新
        const temp = JSON.parse(JSON.stringify(options))
        setOptions(temp)
    }

    // 是否已经作答
    const [isAnwsered, setIsAnwsered] = useState(false)
    // 答案正确与否
    const [isAnswerRight, setIsAnswerRight] = useState(false)

    const suerAnswer = () => {
        // 点击了确定，就是作答了
        setIsAnwsered(true)
        // 对比 用户选中的和答案是否相同
        const userAnswer = options.filter(e => e.checked).map(e => e.key)
        // console.log(userAnswer);
        // 拿到参考答案
        const answer = props.data.answer
        const uAnsswer = userAnswer.join()
        // console.log(answer);
        setIsAnswerRight(answer === uAnsswer)

        // 把作答数据发到服务器
        const {categoryCode,id} = props.data
        console.log(props);
        sendAnswerApi({
            categoryCode,
            actionType:'exam_test',
            userAnswer:uAnsswer,
            actionCode:props.actionCode,
            id
        }).then(res=>{
            // console.log(res);
            if(res.errCode === 0){
                props.success('提交成功')
            }
        }).catch(err=>console.dir(err))
    }
    return (
        <div className="sl">
            <div className="sl-top">
                <span>单选</span>
                <p>{props?.data?.title}</p>
            </div>
            <ul className="qs-list">
                {
                    options.map(item => {
                        return (
                            <li key={item.key} onClick={() => clickToChecked(item)}>
                                <div className="icons">
                                    <RadioButtonUncheckedIcon style={{ display: item.checked ? 'none' : 'block' }} />
                                    <CheckCircleIcon style={{ display: item.checked ? 'block' : 'none' }} className="checked" />
                                </div>
                                <div>{item.key}. {item.value}</div>
                            </li>
                        )
                    })
                }
            </ul>
            <div className="result">
                <div className="btn-sure" onClick={suerAnswer}>确认</div>
                <div className="sure-result" style={{ display: isAnwsered ? 'block' : 'none' }}>
                    <div className="right res" style={{ display: isAnswerRight ? 'block' : "none" }}>
                        <DoneIcon /> <span>回答正确</span>
                    </div>
                    <div className="wrong res" style={{ display: !isAnswerRight ? 'block' : "none" }}>
                        <ReportProblemOutlinedIcon />
                        <span>回答错误</span>
                    </div>
                </div>
                <div className="answer" style={{ display: isAnwsered ? 'block' : 'none' }}>
                    正确答案是：{props?.data?.answer}
                </div>
            </div>
        </div>
    )
}

export default connect(null,alertDispatch)(Select)